<template>
  <div class="table-box">
    <pro-table ref="proTableRef" row-key="id" :columns="columns" :request-api="getJobPageApi">
      <!-- 菜单操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link :icon="AlarmClock" @click="handleOpenTrigger(row)"> 触发器 </el-button>
        <el-button type="primary" link :icon="View" @click="handleOpenLog(row)"> 执行日志 </el-button>
      </template>
    </pro-table>
    <!-- 触发器列表 -->
    <job-trigger-list ref="jobTriggerListDrawerRef" />
    <!-- 执行日志 -->
    <job-log-list ref="jobLogListDialogRef" />
  </div>
</template>

<script setup lang="ts">
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { ref } from "vue";
import { SysJob } from "@/api/interface";
import { getJobPageApi } from "@/api/modules/system/job";
import ProTable from "@/components/ProTable/index.vue";
import JobTriggerList from "./components/triggerList.vue";
import JobLogList from "./components/logList.vue";

import AlarmClock from "~icons/ep/alarm-clock";
import View from "~icons/ep/view";

defineOptions({
  name: "SystemJob"
});

/** 表格实例 */
const proTableRef = ref<ProTableInstance>();
const jobTriggerListDrawerRef = ref<InstanceType<typeof JobTriggerList> | null>(null);
const jobLogListDialogRef = ref<InstanceType<typeof JobLogList> | null>(null);

/** 表格配置项 */
const columns: ColumnProps[] = [
  { prop: "jobId", label: "作业Id", align: "left", search: { el: "input" } },
  { prop: "jobType", label: "作业类型", align: "left" },
  { prop: "description", label: "描述信息", align: "left" },
  {
    prop: "groupName",
    label: "作业组",
    width: 120,
    tag: true,
    enum: [{ label: "System", value: "system", tagType: "success" }],
    search: { el: "select" }
  },
  {
    prop: "concurrent",
    label: "执行方式",
    width: 120,
    tag: true,
    enum: [
      { label: "并行", value: true, tagType: "success" },
      { label: "串行", value: false, tagType: "primary" }
    ]
  },
  {
    prop: "includeAnnotations",
    label: "扫描触发器",
    width: 120,
    tag: true,
    enum: [
      { label: "是", value: true, tagType: "success" },
      { label: "否", value: false, tagType: "primary" }
    ]
  },
  { prop: "operation", label: "操作", width: 210, fixed: "right" }
];

/** 打开触发器列表 */
const handleOpenTrigger = (row: Partial<SysJob.Result>) => {
  jobTriggerListDrawerRef.value?.acceptParams({
    title: "触发器列表",
    isView: true,
    param: { jobId: row.jobId! }
  });
};

/** 打开执行日志 */
const handleOpenLog = (row: Partial<SysJob.Result>) => {
  jobLogListDialogRef.value?.acceptParams({
    title: "执行日志",
    isView: true,
    param: { jobId: row.jobId! }
  });
};
</script>
